<template>
  <view class="order-list-page">
    <!-- 头部tab切换 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-list" 
      scroll-y 
      @scrolltolower="loadMore"
    >
      <view 
        v-for="(order, index) in orderList" 
        :key="index" 
        class="order-item"
		@click="goDetail(order)"
      >
        <view class="order-header">
          <text class="order-time">{{ order.createTime }}</text>
          <text class="order-status">{{ getStatusText(order.status) }}</text>
        </view>
        
        <view class="order-content">
          <image class="product-image" v-if="order.packageCoverImage" :src="order.packageCoverImage" mode="aspectFill"></image>
		  <image class="product-image" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
          <view class="product-info">
            <view class="product-name">{{ order.productName }}</view>
            <view class="product-price">¥{{ order.actualPay }}</view>
          </view>
        </view>

        <!-- 待支付订单的操作按钮 -->
        <view class="order-actions" v-if="order.status === 1">
          <view class="action-btn cancel" @click="cancelOrder(order)">取消订单</view>
         <!-- <view class="action-btn pay" @click="payOrder(order)">立即支付</view> -->
        </view>
      </view>
      <view v-if="orderList.length==0">
		  <nodata></nodata>
	  </view>
      <view class="load-more" v-if="loading">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="noMore">
        <text>没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import nodata from '@/components/nodata/nodata.vue'
export default {
  components: {
  	nodata
  },
  data() {
    return {
      tabs: ['全部', '待支付', '未使用', '已使用', '已失效'],
      currentTab: 0,
      orderList: [],
      page: 1,
      pageSize: 20,
      loading: false,
      noMore: false,
	  status:'',
    }
  },
  onLoad() {
    this.getOrderList();
  },
  methods: {
	goDetail(item){
		uni.navigateTo({
			url:'orderDetail?id='+item.id
		})
	},
    switchTab(index) {
      this.currentTab = index;
      this.page = 1;
      this.noMore = false;
      this.orderList = [];
	  if(index==0){
		  this.status=''
	  }
	  if(index==1){
	  	this.status=1
	  }
	  if(index==2){
	  	this.status=2
	  }
	  if(index==3){
	  	this.status=3
	  }
	  
	  if(index==4){
	  	this.status=4
	  }
      this.getOrderList();
    },
    getOrderList() {
      if (this.loading || this.noMore) return;
      if(this.page==1){
		   this.orderList = []
	  }
      this.loading = true;
	  uni.showLoading({
	  	title: '加载中'
	  })
	  
	  this.$http('jeecg-boot/app/market/bicOrder/qyeryPage',{
	  		status:this.status,
			pageSize:20,
			pageNo:this.page,
			type:2,
			product_type:2
	  },'POST').then(res => {
	  	 this.loading = false;
	  	 uni.hideLoading();
	  	 this.orderList=[...this.orderList, ...res.result.records]
		 /* if(){
			 this.noMore
		 } */
	   })
      
     /* 
        const mockData = this.generateMockData();
        if (this.page === 1) {
          this.orderList = mockData;
        } else {
          this.orderList = [...this.orderList, ...mockData];
        }
        
        this.page++;
        this.loading = false;
        
        // 模拟没有更多数据
        if (this.page > 3) {
          this.noMore = true;
        } */
     
    },
    generateMockData() {
      const statusMap = {
        0: 0, // 全部
        1: 1, // 待支付
        2: 2, // 未使用
        3: 3, // 已使用
        4: 4  // 已失效
      };
      
      const targetStatus = statusMap[this.currentTab];
      const data = [];
      const count = this.page === 1 ? 5 : 3; // 模拟不同页数的数据量
      
      for (let i = 0; i < count; i++) {
        // 如果是"全部"tab，随机生成各种状态的订单
        const status = targetStatus === 0 ? Math.floor(Math.random() * 4) + 1 : targetStatus;
        
        data.push({
          id: `order_${this.page}_${i}`,
          productName: `商品名称${this.page}_${i}`,
          productImage: '/static/logo.png',
          price: (Math.random() * 1000 + 100).toFixed(2),
          createTime: `2023-06-${10 + i} 14:3${i}`,
          status: status
        });
      }
      
      return data;
    },
    getStatusText(status) {
      const statusMap = {
        1: '待支付',
        2: '已支付',
        3: '已核销',
        4: '已取消',
		5: '已退款',
      };
      return statusMap[status] || '';
    },
    loadMore() {
	  this.page++;
      this.getOrderList();
    },
    cancelOrder(order) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
            	title: '加载中'
            })
            this.$http('jeecg-boot/app/market/bicOrder/cancelOrder',{
            		id:order.id,
            },'POST').then(res => {
            	 uni.showToast({
            	   title: '取消成功',
            	   icon: 'success'
            	 });
            	  uni.hideLoading();
				  this.page=1
            	  this.getOrderList();
				  
            	
             })
          }
        }
      });
    },
    payOrder(order) {
      uni.showLoading({
        title: '支付中...'
      });
      
      // 模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        });
        // 实际开发中这里应该是调用支付接口
        // 然后刷新列表或更新对应订单状态
        order.status = 2; // 模拟状态变更
      }, 1500);
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
  height: 100%;
}

.order-list-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 头部tab栏 */
.tab-bar {
  display: flex;
  height: 90rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
  padding: 24rpx 0;
}

.tab-item.active {
  color: #FF2442;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #FF2442;
  border-radius: 2rpx;
}

/* 订单列表 */
.order-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-status {
  font-size: 26rpx;
  color: #FF2442;
}

.order-content {
  display: flex;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-price {
  font-size: 30rpx;
  color: #FF2442;
  font-weight: bold;
  margin-top: 10rpx;
}

/* 订单操作按钮 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.action-btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
}

.action-btn.cancel {
  border: 1rpx solid #ccc;
  color: #666;
}

.action-btn.pay {
  background: linear-gradient(to right, #FF2442, #FF6B81);
  color: #fff;
  font-weight: bold;
}

/* 加载更多 */
.load-more, .no-more {
  text-align: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>